<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>系统菜单管理</title>
    <meta name="description" content="">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/resources/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/resources/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <script src="/resources/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/resources/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/resources/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/resources/css/app.css">
    <link rel="stylesheet" href="/resources/css/employee.type.css">
    <script src="/resources/js/jquery.min.js"></script>
    <script src="/resources/js/jquery.form.js"></script>

</head>

<body data-type="widgets">
<script src="/resources/js/theme.js"></script>
<div class="am-g tpl-g">
    <%--头部开始--%>
    <%@include file="header.jsp" %>
    <%--头部结束--%>

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">

        <div class="container-fluid am-cf">
            <div class="row">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-file-excel-o page-header-heading-icon"></span> 档案选项管理
                            <small>Recording options Manager</small>
                        </div>
                        <p class="page-header-description">档案选项管理</p>
                    </div>
                </div>
                <div class="am-u-lg-3 tpl-index-settings-button">
                    <%--<button type="button" class="page-header-button"--%>
                </div>
            </div>

        </div>

        <div class="row-content am-cf">
            <div class="row widget  am-cf" id="content">
                <!--<div class="am-u-md-1  am-u-lg-2"></div>-->
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <%--新的菜单模式--%>

                    <table width="100%" class="am-table am-table-bordered am-table-compact tpl-table-black "
                           id="example-r">
                        <caption>问题列表</caption>
                        <tr>
                            <th>序号</th>
                            <th>创建时间</th>
                            <th>内容</th>
                            <th>创建人</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <c:forEach items="${pageInfo.list}" var="p" varStatus="i">
                            <tr>
                                <td>${i.index+1}</td>
                                <td><fmt:formatDate pattern="yyyy-MM-dd" value="${p.createtime}" /></td>
                                <td>${p.content}</td>
                                <td>${p.emname}</td>
                                <td>
                                    <c:if test="${p.status==1}">启用</c:if>
                                    <c:if test="${p.status==0}">禁用</c:if>
                                </td>
                                <td>
                                    <a href="javascript:setProblems(${p.pid})"><i class="am-icon-pencil"></i>查看编辑</a>&nbsp;&nbsp;&nbsp;
                                    <c:if test="${p.status==1}"> <a href="javascript:setProblemsstatus('${p.pid}',0)">点击禁用</a></c:if>
                                    <c:if test="${p.status==0}"> <a href="javascript:setProblemsstatus('${p.pid}',1)"><i class="am-icon-pencil"></i>点击启用</a></c:if>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>

                        <div class="am-u-lg-12 am-cf paging">

                            <!-- 分页文字信息，其中分页信息都封装在pageInfo中 -->
                            <div class="col-md-6">
                                当前第：${pageInfo.pageNum }页，总共：${pageInfo.pages }页，总共：${pageInfo.total }条记录
                            </div>
                            <div class="am-fr">
                                <ul class="am-pagination tpl-pagination">
                                    <!-- 首页 -->
                                    <li><a href="/pro/getlist?pn=1">首页</a></li>
                                    <!-- 上一页 -->
                                    <c:if test="${pageInfo.hasPreviousPage }">
                                        <li>
                                            <a href="/pro/getlist?pn=${pageInfo.pageNum-1 }" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                    <!-- 循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接 -->
                                    <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
                                        <c:if test="${page_Num == pageInfo.pageNum }">
                                            <li class="am-active"><a href="/pro/getlist?pn=${page_Num }">${page_Num }</a></li>
                                        </c:if>
                                        <c:if test="${page_Num != pageInfo.pageNum }">
                                            <li><a href="/pro/getlist?pn=${page_Num }">${page_Num }</a></li>
                                        </c:if>
                                    </c:forEach>
                                    <!-- 下一页 -->
                                    <c:if test="${pageInfo.hasNextPage }">
                                        <li>
                                            <a href="/pro/getlist?pn=${pageInfo.pageNum+1 }" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                    <!-- 末页 -->
                                    <li><a href="/pro/getlist?pn=${pageInfo.pages }">末页</a></li>
                                </ul>
                            </div>
                        </div>
                        <form  id="updatproform" action="/pro/setStatus" method="post">
                    <table width="100%" class="am-table am-table-bordered am-table-compact tpl-table-black"
                           id="secondTable" style="display: none">
                        <caption>选项列表</caption>


                    </table>
                        </form>

                </div>
                <!--分页插件Start-->
                <div class="am-u-lg-12 am-cf paging">

                </div>
            </div>
        </div>
    </div>




    <script src="/resources/js/amazeui.min.js"></script>
    <script src="/resources/js/amazeui.datatables.min.js"></script>
    <script src="/resources/js/dataTables.responsive.min.js"></script>
    <script src="/resources/js/app.js"></script>
    <script>
     function addProblem() {
            $('#proform').ajaxSubmit(function (res) {
                if (res.result) {
                    var data = res.data;
                    var tableStr ='  <tr><td>问题</td><td colspan="4"><input type="text" name="content" value="'+data.content+'" style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td></tr>\n' +
                        '<tr><td rowspan="2">选项</td><td><input type="text" name="optiona" value="'+data.optiona+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td> <td><input type="text"  value="'+data.optionb+'" style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td> <td><input type="text" name="optionc"  value="'+data.optionc+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td> <td><input type="text" name="optiond" p value="'+data.optiond+'" style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td> </tr>\n' +
                        '<tr><td><input type="text" name="optione" value="'+data.optione+'" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optionf" value="'+data.optionf+'" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optiong" value="'+data.optiong+'"   style="width: 100%;min-height: 40px;margin: 0;padding:0"></td><td><input type="text" name="optionh" value="'+data.optionh+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td></tr>';
                    $('#secondTable').append(tableStr);
                    $('#secondTable').show();
                    $('#proform').reset();
                }else {
                    alert("数据失败，刷新页面重试");
                }
                return false;
            });
        }

        function setProblemsstatus(id,status) {
            var url = '/pro/setStatus?pid='+id+'&status='+status;
            $.ajax({
                url: url,
                type: 'get',
                cache: false,
                processData: false,
                contentType: false
            }).done(function (res) {
                console.log(res);
                if (res.result) {
                    window.location.reload();
                }else {
                    alert("数据失败，刷新页面重试");
                }
            }).fail(function () {
                alert("网络错误,请刷新重试");
            });
        }



        function setProblems(id) {
            var url = "/pro/getproone?pid="+id;
            $('#secondTable').empty();
            $.ajax({
                url: url,
                type: 'get',
                cache: false,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res.result) {
                    var data = res.data;
                    var tableStr ='<tr><td>问题<input type="hidden" name="pid" value="'+data.pid+'"> </td><td colspan="4"><input type="text" name="content" value="'+data.content+'" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td></tr>\n' +
                        '<tr><td rowspan="2">选项</td><td><input type="text" name="optiona" value="'+data.optiona+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optionb"  value="'+data.optionb+'" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optionc"  value="'+data.optionc+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td> <td><input type="text" name="optiond" p value="'+data.optiond+'" style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td> </tr>\n' +
                        '<tr><td><input type="text" name="optione" value="'+data.optione+'" style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td> <td><input type="text" name="optionf" value="'+data.optionf+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optiong" value="'+data.optiong+'"   style="width: 100%;min-height: 40px;margin: 0;padding:0"></td><td><input type="text" name="optionh" value="'+data.optionh+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0" ></td></tr>' +
                        '<tr><td colspan="4">修改对应内容后提交修改</td><td><button type="button" id="upbtn" onclick="updatePro()">提交更改</button></td></tr>';
                    $('#secondTable').append(tableStr);
                    $('#secondTable').show();
                }else {
                    alert("数据失败，刷新页面重试");
                }
            }).fail(function () {
                alert("网络错误,请刷新重试");
            });

        }

       function updatePro() {
              $('#updatproform').ajaxSubmit(function (res) {
                  console.log(res);
                  if (res.result){
                      alert("更新成功");
                  }else {
                      alert("更新失败");
                  }
                  return false;
              });
            window.location.reload();
          }


        /**
         * 上传附件按钮绑定事件
         */
     /*   $('#addProblem').click(function () {
            console.log("时间提交");
            addProblem();
        });
        */
        
        
      <%--  function getPermisson(id) {
            var url = "/pro/getemptype";
            var meunid = $('#menuId');
            meunid.val(id);
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("服务器内部错误，请刷新重试");
                    return;
                }
               var menuslect= $('#menudetali');
                menuslect.empty();
                var optionString = "";
                for (var i=0;i<res.length;i++){
                    optionString += '<option value="'+res[i].emTypeId+'">'+res[i].typeInstruct+'</option>';
                }
                menuslect.append(optionString);
            }).fail(function () {
                alert("网络错误,请刷新重试");
            });
            $("#promission-type-model").modal();
        }

        $("#addBtnpro").click(function () {
            var menuId = $('#menuId').val();
            var etid = $('#menudetali').val();
            if (etid === null || etid === undefined || etid === '' || menuId === null || menuId === undefined || menuId === ''){
                alert("数据异常，请刷新页面重试");
                return;
            }
            var formData = new FormData();
            formData.append('eid', etid);
            formData.append('menuId', menuId);
            var url = "/pro/InsertMeuid";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                console.log(res);
                if (res === null || res === undefined || res === '') {
                    alert("服务器错误,请检查数据或者刷新页面重试");
                    return;
                }
                alert(res.data);
                window.location.reload();
                //  return res;
            }).fail(function (res) {
                console.log(res);
                alert("网络错误，请检查数据或者刷新页面重试");
            });

        });

        function editType(id) {
            $("#fristName").css("borderStyle", "");
            $("#fristName").css("borderColor", "");
            $("#fristName").css("borderWidth", "");
            var formData = new FormData();
            formData.append("id", id);
            var url = "/m/getOne";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                $("#fristIconDiv").empty();
                var modal = $('#type-model');
                $("#fristid").val(res.id);
                $("#fristName").val(res.name);
                $("#fristicon").val(res.icon);
                var icon ="<i class=\""+res.icon+"  sidebar-nav-link-logo am-icon-md\"></i>";
                $("#fristIconDiv").append(icon);
                modal.modal({'width': '600'});
            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了")

            });
        }
        $('#fristAddBtn').click(function () {
            var id=$("#fristid").val();
           var name= $("#fristName").val();
          var icon= $("#fristicon").val();

            if (!checkName(name)){
                alert("请检查输入的数据");
                return;
            }
            if (id === null || id === undefined || id === ''){
                alert("请检查输入的数据");
                return;
            }
            var formData = new FormData();
            formData.append("id", id);
            formData.append("name", name);
            formData.append("icon", icon);
            var url = "/m/update";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                window.location.reload();
                alert(res.data);

            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了");
            });

        });

        function seeMenu(mid) {
            var secondTable = $("#secondTable");
            secondTable.show();
            var bodyTable = $("#secondTable tbody");
            var formData = new FormData();
            formData.append("partid", mid);
            var url = "/m/getchild";
            var tableString = "";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                bodyTable.empty();
                for (var i = 0; i < res.length; i++) {
                    var thtd = " <tr><td>" + i + "</td>\n" +
                        "<td>" + res[i].name + "</td>" +
                        "<td>" + "<a href=\"" + res[i].href + "\">\n" + res[i].href +
                        "</a>\n" + "</td>\n" +
                        "<td>\n" +
                        "<div class=\"tpl-table-black-operation\">\n" +
                        "<a href=\"javascript:editChildType(" + res[i].id + ");\">\n" +
                        "<i class=\"am-icon-pencil\"></i> 编辑\n" +
                        "</a>\n" +
                        " <a href=\"javascript:getPermisson("+res[i].id+");\">\n" +
                        " <i class=\"am-icon-pencil\"></i> 授权\n" +
                        "  </a></div>\n" +
                        "</td>\n" +
                        "</tr>";
                    console.log(thtd);
                    tableString += thtd;
                }
                // console.log(tableString);
                bodyTable.append(tableString);
            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了")

            });
        }

        function hiddenMenu() {
            $("#secondTable").hide();
        }

        function editChildType(pid) {
            $("#secondeName").css("borderStyle", "");
            $("#secondeName").css("borderColor", "");
            $("#secondeName").css("borderWidth", "");
            $("#secondeName").focus();
            var formData = new FormData();
            formData.append("id", pid);
            var url = "/m/getOne";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                var modal = $('#seconde-type-model');
                $("#secondeId").val(res.id);
                $("#secondeName").val(res.name);
                $("#secondeUrl").val(res.href);
                modal.modal({'width': '600'});
            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了");
            });

        }

        function updateSecondMenu() {
            var id = $("#secondeId").val();
            var name = $("#secondeName").val();
            if (!checkName(name)){
                alert("请检查输入的数据");
                return;
            }
            var formData = new FormData();
            formData.append("id", id);
            formData.append("name", name);
            var url = "/m/update";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                window.location.reload();
                alert(res.data);

            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了");
            });
        }

        $("#fristName").change(function () {
            var name = $("#fristName").val();
            if (checkName(name)){
                $("#fristName").css("borderStyle", "");
                $("#fristName").css("borderColor", "");
                $("#fristName").css("borderWidth", "");
            }else {
                $("#fristName").css("borderStyle", "solid");
                $("#fristName").css("borderColor", "red");
                $("#fristName").css("borderWidth", "1px");
                $("#fristName").focus();
            }
        });


        $("#secondeName").change(function () {
            var name = $("#secondeName").val();
            if (checkName(name)){
                $("#secondeName").css("borderStyle", "");
                $("#secondeName").css("borderColor", "");
                $("#secondeName").css("borderWidth", "");
            }else {
                $("#secondeName").css("borderStyle", "solid");
                $("#secondeName").css("borderColor", "red");
                $("#secondeName").css("borderWidth", "1px");
                $("#secondeName").focus();
            }
        });

        function checkName(name) {
            //校验是否是中文
            var tireg = /^[\u2E80-\u9FFF]+$/;
            if ((tireg.test(name)) && name.length < 20) {
                return true;
            }
            return false;
        }

        $("#fristicon").change(function () {
            $("#fristIconDiv").empty();
            var iconString =$("#fristicon").val();
            var icon ="<i class=\""+iconString+"  sidebar-nav-link-logo am-icon-md\"></i>";
            $("#fristIconDiv").append(icon);
        });
    </script>
--%>
    </script>
</body>

</html>
